<template>
  <div >
    <div class="registerTab">
      <el-card class="box-card">
        <div style="line-height: 40px;border-bottom: #ccc 1px solid;margin-bottom:20px ">注册</div>
        <div>
          <el-form inline>
            <el-form-item label="用户账号">
              <!--   v-model 双向绑定 输入信息的时候，自动修改user.account属性，反之亦然 -->
              <el-input v-model="user.account" clearable></el-input>
            </el-form-item>
            <br>
            <el-form-item label="设置密码">
              <el-input v-model="user.password" show-password clearable></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="user.pwd" show-password clearable></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
              <el-input v-model="user.name" show-password clearable></el-input>
            </el-form-item>

          </el-form>
          <el-button type="primary" @click="register" >确定注册</el-button>
          <el-button type="text" @click="$router.push('/login')">已有账号？去登录</el-button>
        </div>

      </el-card>
    </div>

  </div>

</template>

<script>
export default {
  name: "register",
  data(){
    return{
      pwd:"",
      user:{},
    }

  },
  methods:{
    register(){
      console.log(this.user)
      if (this.user.password === this.user.pwd){
        this.user.type=0
        this.$axios.post("/api/customer/register", this.user).then(res => {
         if (res.data.status == 1){
           this.$message.warning(res.data.msg);
           this.$router.push('/login')
         }else{
           this.$message.warning(res.data.msg);
         }
        })
      }

    }
  }
}
</script>


<style scoped>
.registerTab{
  background-image: url("../assets/img/registertg.jpg");
  width: 1200px;
  height: 535px ;
  margin: auto;
  position: relative;
}
.box-card{
  width: 400px;
  position: absolute;
  right: 98px;
  top: 29px;
  background-color: rgba(255,0255,255,0.3);
}
</style>